Clipchamp'ın video düzenleyici PWA yüklemeleri aylık% 97 oranında büyüme gösteriyor

PWAs, WebAssembly ve ChromeOS, web tabanlı bir video düzenleyicinin 12 milyon kullanıcıya daha iyi performans ve daha ilgi çekici bir deneyim sunmasına nasıl yardımcı oluyor?

Sören Balko
Sören Balko

%97

PWA yüklemelerindeki aylık artış

2,3x

Perf. iyileştirme

%9

PWA kullanıcılarında daha yüksek elde tutma oranı

Clipchamp, herkesin video aracılığıyla paylaşmaya değer hikayeler anlatmasını sağlayan tarayıcı içi online video düzenleyicisidir. Dünya genelinde 12 milyondan fazla içerik üretici, videoları kolayca düzenlemek için Clipchamp'ı kullanıyor. Kırpma ve kısaltma gibi sezgisel araçlardan ekran kaydedicimiz gibi pratik özelliklere ve hatta meme oluşturma aracına kadar video oluşturmak için basit çözümler sunuyoruz.

Clipchamp'ı kimler kullanır?

Kullanıcılarımız (veya her gün düzenleme yapanlar olarak adlandırdığımız kullanıcılar) çeşitlilik gösteriyor. Clipchamp ile video düzenlemek için uzmanlık gerekmez. Özellikle şu anda satış, destek eğitimi ve ürün pazarlama ekiplerinin, ilgi çekici hale getirmek için metin ve GIF'ler ekledikleri kısa açıklamalı içerikler oluşturmak amacıyla web kameramızı ve ekran kaydedicimizi kullandığını görüyoruz. Ayrıca, birçok küçük işletmenin hareket halindeyken sosyal medya videoları düzenleyip yayınladığını görüyoruz.

Karşılaştıkları zorluklar nelerdir?

Video düzenlemenin ilk başta korkutucu olabileceğinin farkındayız. Muhtemelen karmaşık düzenleme yazılımlarıyla ilgili önceki can sıkıcı deneyimler nedeniyle bunun zor olduğu varsayılır. Buna karşılık Clipchamp, metin yer paylaşımları, stok video ve müzik, şablonlar ve daha fazlası ile destek sağlayarak kolaylık ve basitliğe odaklanır.

Çoğu sıradan düzenleyicinin sinema şaheserleri oluşturmak istemediğini fark ettik. Kullanıcılarımızla çok sık iletişim kuruyoruz ve yoğun oldukları ve hikayelerini mümkün olduğunca hızlı ve kolay bir şekilde dünyaya duyurmak istediklerini sürekli olarak hatırlatıyorlar. Bu nedenle, bu konuya odaklanıyoruz.

Clipchamp PWA'sı geliştirme

Clipchamp olarak, kullanıcıların video aracılığıyla hikayelerini anlatmalarına yardımcı olmayı amaçlıyoruz. Bu vizyona ulaşmak için, kullanıcılarımızın video projesi oluştururken kendi kamera kayıtlarını kullanabilmelerinin önemli olduğunu kısa sürede fark ettik.

Bu analiz, Clipchamp'ın mühendislik ekibinin bir web uygulamasında gigabayt ölçeğindeki medya dosyalarını verimli bir şekilde işleyebilecek bir teknoloji geliştirmesi için baskı oluşturdu. Ağ bant genişliği kısıtlamalarını göz önünde bulundurarak geleneksel bulut tabanlı bir çözümü hemen elemeyi tercih ettik. Perakende internet bağlantısından büyük medya dosyalarını yüklemek, düzenleme işleminin başlamasından önce her zaman çok uzun bekleme sürelerine neden olur ve bu da kötü bir kullanıcı deneyimine yol açar.

Bu nedenle, video işlemeyle ilgili tüm "ağır işlerin" son kullanıcının cihazındaki donanım kaynakları kullanılarak yerel olarak yapıldığı tamamen tarayıcı içi bir çözüme geçtik. Tarayıcı içi video oluşturma platformu oluşturmanın kaçınılmaz zorluklarının üstesinden gelmemize yardımcı olması için stratejik olarak Chrome Tarayıcı'ya ve dolayısıyla ChromeOS platformuna güvendik.

Video işleme, hem bilgisayar hem de depolama kaynaklarını etkileyen son derece yoğun bir işlemdir. Clipchamp'ın ilk sürümünü Google'ın (Taşınabilir) Yerel İstemcisi (PNaCl) üzerinde oluşturmaya başladık. PNaCl, kullanımdan kaldırılmış olsa da ekibimiz için web uygulamalarının son kullanıcı donanımlarında çalışırken hızlı ve düşük gecikmeli olabileceğinin mükemmel bir kanıtıydı.

Daha sonra WebAssembly'e geçiş yaptığımızda Chrome'un toplu bellek işlemleri, iş parçacığı ve en son olarak sabit genişlikli vektör işlemleri gibi MVP sonrası özellikleri dahil etme konusunda öncülük ettiğini görmekten memnuniyet duyduk. Mühendislik ekibimiz, özellikle de sonuncu özelliğin kullanıma sunulmasını heyecanla bekliyordu. Bu özellik, video işleme paketimizi modern CPU'larda yaygın olarak kullanılan SIMD işlemlerinden yararlanacak şekilde optimize etmemizi sağlıyor. Chrome'un WebAssembly SIMD desteğinden yararlanarak 4K video kod çözme ve video kodlama gibi özellikle yoğun bazı iş yüklerini hızlandırdık.

Kodlayıcı performansı (1080p, 30 fps'de 8,33 saniye). SIMD olmadan varsayılan hazır ayar: 25 saniye. SIMD ile varsayılan hazır ayar: ~13 saniye. SIMD olmadan sıkıştırma hazır ayarı: ~83 saniye. SIMD ile sıkıştırma hazır ayarı: ~33 saniye. SIMD olmadan kalite hazır ayarı (yeni!): ~75 saniye. SIMD ile kalite hazır ayarı: ~30 saniye.

Mühendislerimizden biri, çok az deneyime sahip olmasına rağmen bir aydan kısa bir süre içinde performansı 2,3 kat artırmayı başardı. Henüz Chrome kaynaklı bir deneme sürümüyle sınırlı olsa da bu SIMD geliştirmelerini kullanıcılarımızın çoğuna sunmayı başardık. Kullanıcılarımız çok farklı donanım kurulumları kullansa da, üretimde hata oranlarında olumsuz bir etki görmeden üretimde eşleşen bir performans artışı olduğunu doğrulayabildik.

Daha yakın bir zamanda, şu anda başka bir Chrome kaynak denemesi kapsamında kullanılabilen yeni WebCodecs API'yi entegre ettik. Bu yeni özelliği kullanarak, birçok popüler Chromebook'ta bulunan düşük özellikli donanımlarda video kod çözme performansını daha da artırabileceğiz.

Oluşturulan PWA'nın benimsenmesini teşvik etmek önemlidir. Birçok web uygulamasında olduğu gibi, Google dahil olmak üzere sosyal medya girişleri gibi erişimi kolaylaştıran özellikler, kullanıcının videoyu düzenleyebileceği bir yere hızlıca ulaşmasını ve ardından videoyu dışa aktarmayı kolaylaştırmayı hedefledik. Ayrıca, PWA yükleme istemlerimizi araç çubuğunda ve menü gezinmemizde pop-up bildirim olarak tanıttık.

Sonuçlar

Yüklenebilir Chrome PWA'mız çok iyi performans gösteriyor. PWA kullanıcılarının, standart masaüstü kullanıcılarımıza kıyasla% 9 daha yüksek elde tutma oranına sahip olduğunu görmek bizi çok mutlu etti. PWA'nın yükleme sayısı çok yüksek. Beş ay önce kullanıma sunduğumuzdan bu yana aylık% 97 oranında artış kaydetti. Ayrıca, daha önce de belirtildiği gibi WebAssembly SIMD geliştirmeleri performansı 2, 3 kat artırdı.

Haziran 2020: ~1.000 yükleme. Temmuz 2020: ~5.000 yükleme. Ağustos 2020: ~12.000 yükleme. Eylül 2020: ~20.000 yükleme. Ekim 2020: ~30.000 yükleme.
Son 6 ay içinde Clipchamp PWA yüklemeleri.

Gelecek

PWA'mızın etkileşimi ve benimsenmesi bizi şaşırttı. PWA'nın yüklü olması ve daha kolay erişilebilir olması nedeniyle Clipchamp'ın kullanıcı elde tutma oranının arttığını düşünüyoruz. Ayrıca, PWA'nın düzenleyici için daha iyi performans gösterdiğini, bu sayede düzenleyicinin daha ilgi çekici hale geldiğini ve kullanıcıların geri gelmesini sağladığını da fark ettik.

Gelecekte, ChromeOS'ün daha fazla kullanıcının daha az çabayla daha fazla iş yapmasına olanak tanıması için heyecanlıyız. Özellikle, dosyalarla çalışırken yerel işletim sistemiyle olan bazı kolay entegrasyonlardan heyecan duyuyoruz. Bu değişikliğin, yoğun bir iş temposuna sahip editörlerimizin iş akışlarını hızlandıracağını düşünüyoruz. Bu da en önemli önceliklerimizden biri.